<template>


  <div class="widget widget-suggested-groups">
    <h3 class="widget-title">兴趣小组</h3>
    <article class="item">
      <a href="groups.html" class="thumb">
        <span class="fullimage bg1" role="img"></span>
      </a>
      <div class="info">
        <h4 class="title">
          <a href="groups.html">技术交流</a>
        </h4>
        <span>5000+ 成员</span>
        <a href="groups.html" class="join-btn">加入</a>
      </div>
    </article>
    <article class="item">
      <a href="groups.html" class="thumb">
        <span class="fullimage bg2" role="img"></span>
      </a>
      <div class="info">
        <h4 class="title">
          <a href="groups.html">工作推荐</a>
        </h4>
        <span>5000+ 成员</span>
        <a href="groups.html" class="join-btn">加入</a>
      </div>
    </article>
    <article class="item">
      <a href="groups.html" class="thumb">
        <span class="fullimage bg3" role="img"></span>
      </a>
      <div class="info">
        <h4 class="title">
          <a href="groups.html">摄影爱好</a>
        </h4>
        <span>5000+ 成员</span>
        <a href="groups.html" class="join-btn">加入</a>
      </div>
    </article>
  </div>
  <div class="widget widget-watch-video">
    <h3 class="widget-title">视频推荐</h3>
    <div class="watch-video-slides owl-carousel owl-theme">
      <div class="video-item">
        <img src="/src/assets/images/watch-video/video-1.jpg" alt="image">
        <a href="#"
           class="video-btn popup-youtube">
          <i class="ri-play-fill"></i>
        </a>
      </div>
      <div class="video-item">
        <img src="/src/assets/images/watch-video/video-2.jpg" alt="image">
        <a href="#"
           class="video-btn popup-youtube">
          <i class="ri-play-fill"></i>
        </a>
      </div>
      <div class="video-item">
        <img src="/src/assets/images/watch-video/video-3.jpg" alt="image">
        <a href="#"
           class="video-btn popup-youtube">
          <i class="ri-play-fill"></i>
        </a>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, reactive, onMounted} from "vue";
import axios from '@/plugins/axios.js'

onMounted(() => {
});
</script>

<style scoped>

</style>